import React, { useEffect } from "react";
import { IRouteComponentProps, knowledgeModelState, useDispatch, useSelector } from "umi";
import style from "./style.less";
import ImageViews from "@/components/ImageViews/ImageViews";

const knowledgeKDetail: React.FC<IRouteComponentProps<{ kid: string }>> = ({ match }) => {
    const Dispatch = useDispatch();
    const { kid } = match.params;
    const { knowledgeDetail } = useSelector((state: { knowledge: knowledgeModelState }) => {
        return state.knowledge
    });

    useEffect(() => {
        Dispatch({
            type: "knowledge/knowledgeDetail",
            payload: kid
        })
    }, [])

    console.log(knowledgeDetail.children, "111111111111111");
    const children = knowledgeDetail.children;
    return (
        <div className={style.box}>
            <ImageViews>
                <h1>{knowledgeDetail.title}</h1>
                <div className={style.detail_kie}>
                    <div className={style.img}>
                        <img src={knowledgeDetail.cover} alt="" />
                    </div>
                    <h1 className={style.title}>{knowledgeDetail.title}</h1>
                    <h3 className={style.summary}>{knowledgeDetail.summary}</h3>
                    <p className={style.createAt}>{knowledgeDetail.views}次阅读 {knowledgeDetail.createAt}</p>
                    <p className={style.antbutton}><button  ><span>开始阅读</span></button></p>
                    <ul>
                        {children?.map(item => {
                            return <li className={style.li} key={item.id}>{item.title}</li>
                        })}
                    </ul>
                </div>
            </ImageViews>
            <div className="right">
                <h2>其他知识笔记</h2>
                {/* <Suspend></Suspend> */}
            </div>

        </div>
    );
}
export default knowledgeKDetail